<template>
  <div>
    <div class="card">
      <!-- <div class="card-image">
        <figure class="image is-4by3">
          <img
            src="https://bulma.io/images/placeholders/1280x960.png"
            alt="Placeholder image"
          />
        </figure>
      </div> -->
      <div class="card-content">
        <div class="media">
          <div class="media-left">
            <vs-avatar size="60">
              <i class="bx bx-user"></i>
            </vs-avatar>
          </div>
          <div class="media-content">
            <div class="columns">
              <div class="column">
                <p class="title is-4" @click="zone()">
                  {{ userData.username }}
                </p>
                <p class="subtitle is-6">{{ userData.level }}</p>
              </div>
              <div class="column is-one-quarter">
                <div v-if="!myself">
                  <div v-if="flag == 0">
                    <vs-button @click="sub()"> 订阅 </vs-button>
                    <!-- <h5>点击订阅</h5> -->
                  </div>
                  <div v-else>
                    <vs-button @click="del()"> 取关 </vs-button>
                    <!-- <div>点击取关</div> -->
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="content">
          <div v-if="userData.tail.length != 0">
            {{ userData.tail }}
            <!-- <br /> -->
          </div>

          <!-- {{ userData.tags }} -->
          <i
            class="bx bx-tag"
            v-for="tag in userData.tags"
            :key="tag"
            style="color: pink"
          >
            {{ tag.name ? tag.name : tag }}
          </i>
        </div>
      </div>
    </div>
    <div style="padding: 10px"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      allData: [],
      userData: {},
      is_myself: 0,
      flag: 0,
      isActive: true,
      myself: false,
    };
  },
  methods: {
    async zone() {
      let userid = await this.$parent.getGalleryUid();
      this.$router.push({
        path: "/zone",
        query: {
          uid: userid,
        },
      });
    },
    test() {
      console.log("ok");
    },
    reload() {
      this.isActive = false;
      this.$nextTick(() => {
        this.isActive = true;
      });
    },
    //订阅用户
    async sub() {
      console.log(this.is_myself);
      if (this.is_myself == 1) {
        alert("请不要订阅你自己");
        return;
      }
      let userid = await this.$parent.getGalleryUid();
      let res = await this.$http.post(
        "/go/sub/addUid",
        {
          targetUid: userid,
        },
        {
          headers: {
            pass: "",
            Authorization: "Bearer " + (await localStorage.getItem("token")),
          },
        }
      );
      console.log(res);
      if (res.data.status == 20000) {
        this.reload();
        this.flagRev();
        this.$vs.notification({
          title: "添加成功",
        });
        console.log("添加成功");
      }
    },
    flagRev() {
      if (this.flag == 0) {
        this.flag = 1;
      } else {
        this.flag = 0;
      }
    },
    //取关用户
    async del() {
      let userid = await this.$parent.getGalleryUid();
      console.log(userid);
      let res = await this.$http.delete("/go/sub/removeUid", {
        data: {
          targetUid: userid,
        },
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      });
      console.log(res);
      if (res.data.status == 20000) {
        this.reload();
        this.flagRev();
        this.$vs.notification({
          title: "删除成功",
        });
        console.log("删除成功");
      }
    },
  },
  async beforeCreate() {
    if (localStorage.getItem("uid") == (await this.$parent.getGalleryUid())) {
      this.myself = true;
    }
    // this.wait(500)
    // await test()
    setTimeout(async () => {
      let userid = await this.$parent.getGalleryUid();
      console.log(userid);
      let res = await this.$http.get("/go/socail/info/" + userid, {
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      });
      let res_admin = await this.$http.get("/go/socail/info/", {
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      });
      if (res_admin.data.uid == userid) {
        this.is_myself = 1;
      }
      // console.log(this.is_myself);
      // console.log(res_admin.data.uid);
      // console.log(res.data);
      this.userData = res.data;
      let res_2 = await this.$http.get("/go/socail/infoWithSub/" + userid, {
        headers: {
          pass: "",
          Authorization: "Bearer " + (await localStorage.getItem("token")),
        },
      });
      // console.log(res_2);
      console.log(res_2.data.subed);
      if (res_2.data.subed == true) {
        this.flag = 1;
        // console.log(this.flag);
      }
    }, 200);
  },
};
</script>

<style>
</style>